<template>
  <div>
    <h3>计算属性的基本使用</h3>
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <p>翻转后的: {{reverseMsg}}</p>
    <p>翻转后的: {{reverseMsg}}</p>
    <p>翻转后的: {{reverseMsg}}</p>
    <p>翻转后的: {{reverseMsg}}</p>
    <p>翻转后的: {{reverseMsg}}</p>
    <hr>
    <p>利用函数翻转: {{reverseMsgFn()}}</p>
    <p>利用函数翻转: {{reverseMsgFn()}}</p>
    <p>利用函数翻转: {{reverseMsgFn()}}</p>
    <p>利用函数翻转: {{reverseMsgFn()}}</p>
    <p>利用函数翻转: {{reverseMsgFn()}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello world'
    }
  },
  // 1. 计算属性要写在computed中
  // 2. 计算属性是个函数  必须得有返回值
  // 3. 使用的时候,当成属性使用
  // 计算属性有缓存, 多次使用的时候只需要从内存中拿就行
  computed: {
    reverseMsg() {
      console.log("我是计算属性");
      return this.msg.split('').reverse().join('')
    }
  },
  methods: {
    reverseMsgFn() {
      console.log('我是函数执行的');
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

<style>

</style>